<template>
	<view class="beijingse">
		<view class="ffffff">
			<u-tabs :list="list1" lineColor="#2361FF" @click="changetab" :scrollable="false" :activeStyle="{
				    color: '#333333',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				            color: '#999999',
							fontWeight: '500',
				            transform: 'scale(1)'
				        }" itemStyle="height: 44px;"></u-tabs>
		</view>
		<view class="mainpadding">
			<view class="shangbj dingwei radius ffffff mainpadding" v-for="item in list.data" :key="item.id" @click="tzckdd(item.id)">
				<view class="jflable xiaobai smalltext"  v-if="item.order_type==2">积分订单</view>
				<view class="flexbetween margin_top2">
					<view class="strongtext xiaohei">订单编号：{{item.order_no}}</view>
					<!-- 1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单(已弃用),6=已完成,7=已取消,8=取消审核中 -->
					<view class="strongtext xiaolan" v-if="item.state==1">待付款</view>
					<view class="strongtext xiaolan" v-if="item.state==2">待发货</view>
					<view class="strongtext xiaolan" v-if="item.state==3">待收货</view>
					<view class="strongtext xiaolan" v-if="item.state==6 && item.comment_status==10">待评论</view>
					<view class="strongtext xiaolan" v-if="item.state==6 && item.comment_status==20">已完成</view>
					<view class="strongtext xiaohui" v-if="item.state==7">已取消</view>
					<view class="strongtext xiaohui" v-if="item.state==8">取消审核中</view>
				</view>
				<view class="flextop margin_top" v-for="ite in item.goods" :key="item.id">
					<image class="sptup" :src="ite.image_text" mode=""></image>
					<view class="" style="width: 69%;">
						<view class="flexbetween">
							<view class="ershiba fonweight xiaohei yhxk">{{ite.title}}</view>
							<view class="strongtext fonweight xiaohei" v-if="item.order_type==1">￥{{ite.price}}</view>
							<view class="strongtext fonweight xiaohei" v-if="item.order_type==2">{{ite.price}}积分</view>
						</view>
						<view class="flexbetween margin_top1">
							<view class="ershiba xiaohui yhxk">{{ite.difference}}</view>
							<view class="ershiba xiaohui">×{{ite.number}}</view>
						</view>
					</view>
				</view>
				<view class="strongtext xiaohei fonweight margin_top2 textright" v-if="item.order_type==1">
					<text class="sanshier xiaohei fonweight">￥{{item.pay_price}}</text>
				</view>
				<view class="strongtext xiaohei fonweight margin_top2 textright" v-if="item.order_type==2">
					<text class="sanshier xiaohei fonweight">{{item.total_price}}积分</text>
				</view>
				<!-- 1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单(已弃用),6=已完成,7=已取消,8=取消审核中 -->
				<view class="flexright margin_top">
					<view class="bkbtn flexcenter margin_left2"  v-if="item.state==1 || item.state==2" @click.stop="showModal('确认取消当前订单吗？',item.id)">取消订单</view>
					<view class="lanbtn flexcenter margin_left2" v-if="item.state==1" @click.stop="payorder(item)">立即付款</view>
					<view class="lanbtn flexcenter margin_left2" v-if="item.state==2 || (item.state==6 && item.comment_status==20)">查看详情</view>
					<view class="lanbtn flexcenter margin_left2" v-if="item.state==3" @click.stop="showModal('是否确认收货？',item.id)">确认收货</view>
					<view class="lanbtn flexcenter margin_left2" v-if="item.state==6 && item.comment_status==10" @click.stop="lijipj(item.id)">立即评价</view>
					<view class="bkbtn flexcenter margin_left2" v-if="item.state==7 || (item.state==6 && item.comment_status==20)" @click.stop="showModal('确认删除当前订单吗？',item.id)">删除订单</view>
				</view>
			</view>
		</view>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [{
						name: '全部',
						value: 0,
					},
					{
						name: '待付款',
						value: 1,
					}, {
						name: '待发货',
						value: 2,
					},{
						name: '待收货',
						value: 3,
					},{
						name: '已完成',
						value: 6,
					}
				],
				tabsid: 0,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				modal:{
					modalShow:false,
					title:"是否确认退出登录？",
				},
				currentid:"",
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					state: this.tabsid
				}
				let url = '/api/order/getorderlist'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
					console.log(this.list, "金戈里");
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			payorder(item) {
				let obj = {
					order_id:item.id,
					pay_price: item.pay_price,
				}
				uni.navigateTo({
					url: '/pages_homepage/zhifudd?msg=' + encodeURIComponent(JSON
						.stringify(obj))
				})
			},
			shouhuo(id) {
				httpRequest.request('/api/order/confirmOrder', 'POST', {
					id
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			delitem(id) {
				httpRequest.request('/api/order/delOrder', 'POST', {
					id
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			cancelitem(order_id) {
				httpRequest.request('/api/order/cancelOrder', 'GET', {
					order_id
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			showModal(text,id){
				this.currentid = id
				this.modal.title=text
				this.modal.modalShow = true
			},
			modalSure(){
				if(this.modal.title=="确认取消当前订单吗？"){
					this.cancelitem(this.currentid)
				}else if(this.modal.title=="确认删除当前订单吗？"){
					this.delitem(this.currentid)
				}else if(this.modal.title=="是否确认收货？"){
					this.shouhuo(this.currentid)
				}
				this.modalcancel()
			},
			modalcancel(){
				this.modal.modalShow = false
			},
			// 跳转订单详情
			tzckdd(id) {
				uni.navigateTo({
					url: '/pages_mypage/dingdanxq?id='+id
				})
			},
			lijipj(id) {
				uni.navigateTo({
					url: '/pages_mypage/lijipj?id='+id
				})
			},
			changetab(e) {
				this.tabsid = e.value
				this.list.data = []
				this.init()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jflable{
		position: absolute;left: 0;
		top: 0;
		padding: 5rpx 15rpx;
		background-color: #2361ff;
		border-radius: 20rpx 0 20rpx 0;
	}
	.lanbtn {
		width: 193rpx;
		height: 68rpx;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		background-color: #2361FF;
		border: 1rpx solid #2361FF;
	}

	.bkbtn {
		width: 193rpx;
		height: 68rpx;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #7A7C94;
		border: 1rpx solid #B5BFDA;
	}

	.sptup {
		width: 176rpx;
		height: 176rpx;
		border-radius: 20rpx;
	}

	.shangbj {
		margin-top: 30rpx;
	}

	.shangbj:first-child {
		margin-top: 0rpx;
	}
</style>